<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
    <link rel="stylesheet" href="../../static/css/register.css" />
    <style type="text/css">
      .login_form {
        height: 420px;
        margin-top: 25px;
      }
    </style>
    <script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
$(function () {
  $(".btn").click(function () {
    //清除上次信息
    $(".errMess").css("visibility","hidden");

    var flag = true;

    //用户名
    var reg_username =/^[a-zA-Z0-9]{6,16}$/;
    var username =$("[name='username']").val();
    if(!reg_username.test(username)){
      $("#msg_name").css("visibility","visible")
      flag = false;
    }
    //密码
    var reg_password =/^\w{8,}$/;
    var password =$("[name='password']").val();
    if(!reg_password.test(password)){
      $("#msg_password").css("visibility","visible");
      flag = false;
    }
//重复密码
    var rePassword =$("[name ='rePassword']").val();
    if(rePassword.length == 0){
      $("#msg_rePassword").css("visibility","visible");
      flag = false;
    }else {
      if(password != rePassword){
      $("#msg_rePassword").css("visibility","visible");
      flag = false;
    }
    }
    //邮箱
    var reg_email =/^\w+@\w+\.(com|cn|net)$/;
    var email =$("[name='email']").val();
    if(!reg_email.test(email)){
      $("#msg_email").css("visibility","visible")
      flag = false;
    }
    //验证码

    var code =$("[name='code']").val();
    if(code.length ==""){
      $("#msg_code").css("visibility","visible");

      flag = false;
    }

    return flag;
  });
});

    </script>
  </head>
  <body>
    <div id="login_header">
      <a href="../../index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div class="register_form">
        <h1>注册尚硅谷会员</h1>
        <form action="regist_success.html">
          <div class="form-item">
            <div>
              <label>用户名称:</label>
              <input type="text" placeholder="请输入用户名" name="username" />
            </div>
            <span class="errMess" id="msg_name">用户名应为6~16位数组和字母组成</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户密码:</label>
              <input type="password"  placeholder="请输入密码" name="password" />
            </div>
            <span class="errMess" id="msg_password">密码的长度至少为8位</span>
          </div>
          <div class="form-item">
            <div>
              <label>确认密码:</label>
              <input type="password" placeholder="请输入确认密码"  name="rePassword"/>
            </div>
            <span class="errMess" id="msg_rePassword">密码两次输入不一致</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户邮箱:</label>
              <input type="text" placeholder="请输入邮箱" name="email"/>
            </div>
            <span class="errMess" id="msg_email" >请输入正确的邮箱格式</span>
          </div>
          <div class="form-item">
            <div>
              <label>验证码:</label>
              <div class="verify">
                <input type="text" placeholder="验证码" name="code" />
                <img src="../../static/img/code.bmp" alt="" />
              </div>
            </div>
            <span class="errMess" id="msg_code">请输入正确的验证码</span>
          </div>
          <button class="btn">注册</button>
        </form>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </body>
</html>
